<template>
	<view class="task" @touchstart="handlePageTouchStart">
		<view class="navigationBar">
			<tui-icon name="arrowleft" color="#ffffff" :size="50" class="navIcon" @click="tolastPage"></tui-icon>
			<view class="navText">重点区域巡查反馈</view>
		</view>
		<view class="form">
			<view class="formList">
				<span>乡镇街道：</span>
				<input v-model="form.name" class="formListInput" type="text" placeholder="乡镇街道" />
			</view>
			<view class="formList">
				<span>村社区：</span>
				<input v-model="form.address" class="formListInput" type="text" placeholder="教别" />
			</view>
			<view class="formList">
				<span>反馈人：</span>
				<input v-model="form.describe" class="formListInput" type="text" placeholder="场所名称" />
			</view>
			<view class="formList">
				<span>反馈时间：</span>
				<input v-model="form.time" class="formListInput" type="text" placeholder="巡查时间" @click="showTime" disabled/>
				<tui-datetime ref="dateTime" :type="2" @confirm="changeTime"></tui-datetime>
			</view>
			<view class="formList">
				<span>事发地点：</span>
				<input v-model="form.peopleNum" class="formListInput" type="text" placeholder="巡查人员" />
			</view>
			<view class="formList">
				<span>情况描述：</span>
				<textarea v-model="form.feedback" rows="2" cols="10" class="InputTextarea" placeholder="情况反馈"></textarea>
			</view>
			<view class="but">
				<span @click="submitTo">确定</span>
			</view>
		</view>
		<tui-tips ref="toast" position="center"></tui-tips>
	</view>
</template>

<script>

	export default {
		components: {
		},
		data() {
			return {
				form:{
					name:'',
					address:'',
					time:'',
					describe:'',
					peopleNum:'',
					level:'',
					targetList:'',
					feedback:''
				}
			};
		},
		computed: {},
		onLoad() {},
		onUnload() {},
		onShow() {
		},
		mounted(){},
		methods: {
			submitTo(){
				let options = {
					msg: '',
					duration: 2000
				};
				if(this.form.name == ''){
					options.msg="事件名称不能为空"
					this.$refs.toast && this.$refs.toast.showTips(options);
				}else if(this.form.address == ''){
					options.msg="事发地点不能为空"
					this.$refs.toast && this.$refs.toast.showTips(options);
				}else if(this.form.time == ''){
					options.msg="请选择时间"
					this.$refs.toast && this.$refs.toast.showTips(options);
				}else if(this.form.describe == ''){
					options.msg="事件描述不能为空"
					this.$refs.toast && this.$refs.toast.showTips(options);
				}else if(this.form.peopleNum == ''){
					options.msg="涉及人数不能为空"
					this.$refs.toast && this.$refs.toast.showTips(options);
				}else if(this.form.level == ''){
					options.msg="请选择事件级别"
					this.$refs.toast && this.$refs.toast.showTips(options);
				}else if(this.form.targetList == ''){
					options.msg="下派不能为空"
					this.$refs.toast && this.$refs.toast.showTips(options);
				}else if(this.form.feedback == ''){
					options.msg="情况反馈不能为空"
					this.$refs.toast && this.$refs.toast.showTips(options);
				}else{
					console.log(this.form)
				}
			},
			tolastPage(){
				wx.navigateBack({
				  delta: 1 
				})
			},
			obtainConten(text){
				this.activeTab = text
			},
			showTime(){
				this.$refs.dateTime && this.$refs.dateTime.show();
			},
			changeTime(e) {
				this.form.time = e.result;
			},
		}
	}
</script>

<style lang="scss">
	.task{height: 100vh;}
	.navigationBar{position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 180rpx; background: url('../../static/imgs/headbg.png') no-repeat; background-size: 100% 100%;
		.navIcon{position: absolute; left: 0;}
		.navText{font-size: 45rpx;}
	}
	.form{ height: calc(100% - 200rpx); overflow-y: auto;
		.formList{ display: flex; align-items: center; padding: 0 30rpx; margin: 40rpx 0;
			span{width: 170rpx; font-size: 30rpx;}
			.formListInput{border: 1rpx solid rgba(170, 170, 170, 0.5); border-radius: 10rpx; height:85rpx; width: calc(100% - 170rpx); padding-left: 20rpx;}
			.InputTextarea{border: 1rpx solid rgba(170, 170, 170, 0.5); border-radius: 10rpx; height: 150rpx; width: calc(100% - 170rpx); padding-left: 20rpx;}
		}
		.but{text-align: center; margin-top: 80rpx;
			span{font-size: 38rpx; padding:25rpx 60rpx; color:#ffffff; background: linear-gradient(90deg, rgba(23, 72, 244, 1) 0%, #2e7ff3 100%); border-radius: 10rpx;}
		}
	}
</style>